<template>
	<view>
		<u-navbar title="核销记录" autoBack placeholder :border="false"></u-navbar>
		<view class="goods-record-s" @click="toDetail(goods)" v-for="(goods, index) in dataList" :key="index">
			<view class="goods-record-s-item">
				<view class="goods-record-s-item-l">
					<text style="font-weight: bold;color: #333;font-size: 32rpx;padding-bottom: 4rpx;">{{goods.goodsName}}</text>
					<text style="color: #333; font-size: 28rpx;">{{goods.exchangeTime}}</text>
				</view>
				<view>
					<text class="iconfont icon-youjiantou"></text>	
				</view>	
			</view>	
		</view>
		<u-empty
				v-if="!loading && dataList.length===0"
				text=" "
		        mode="data"
		        icon="http://cdn.uviewui.com/uview/empty/data.png"
		>
		</u-empty>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	import {exchangeList} from '@/api/home.js';
	export default {
		data() {
			return {
				dataList: [],
				loading: true,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 14,
				current: 0
			}
		},
		onLoad() {
			this.exchangeList();
		},
		onReachBottom() {
			if(this.status === 'loading') {
				this.exchangeList();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNo = 1;
			this.exchangeList();
		},
		methods: {
			...mapActions(['setDetail']),
			toDetail(item) {
				this.setDetail({detail: item});
				this.$cuNavigateTo('/pages/me/check_record_detail');
			},
			exchangeList() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				this.$cuLoading('加载中...').then(() => {
					exchangeList(postObj).then(res => {
						const {current, pages, records} = res.result;
						if(this.pageNo === 1) {
							let empty = [];
							this.dataList = empty.concat(records);
						} else {
							this.dataList = this.dataList.concat(records);
						}
						if(current >= pages) {
							this.status = 'nomore'
						} else {
							this.pageNo ++;
							this.status = 'loading'
						}
					}).finally(() => {
						uni.stopPullDownRefresh();
						this.loading = false;
						uni.hideLoading()
					});
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.goods-record-s {
		display: flex;
		margin-bottom: 16rpx;
		padding: 16rpx 32rpx;
		background-color: #fff;
		align-items: center;
		.goods-record-s-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.goods-record-s-item-l {
				display: flex;
				flex-direction: column;
			}
			.goods-record-s-item-r {
				font-size: 36rpx;
				display: flex;
				align-items: center;
				line-height: 36rpx;
			}
			.plus {
				color: $uni-color-primary;
			}
			.minus {
				color: $uni-color-error;
			}
		}
	}
	
	.record-date {
		padding: 16rpx;
		.plus {
			font-size: 28rpx;
			color: $uni-color-success;
		}
		.minus {
			font-size: 28rpx;
			color: $uni-color-error;
		}
	}
</style>